<template>
  <view class="container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <image src="/static/ic_search.png" mode=""></image>
        <input type="text" placeholder="搜索消息" @input="onSearchInput" />
      </view>
      <view class="search-filter">
        <text @click="showFilter = !showFilter">筛选</text>
      </view>
    </view>

    <!-- 消息分类选项卡 -->
    <view class="message-tabs">
      <view 
        v-for="(tab, index) in messageTabs" 
        :key="index" 
        :class="{ 'tab-item': true, 'active': currentTabIndex === index }"
        @click="switchTab(index)"
      >
        <text>{{ tab.name }}</text>
        <view v-if="tab.count > 0" class="badge">{{ tab.count }}</view>
      </view>
    </view>

    <!-- 筛选条件面板 -->
    <view v-if="showFilter" class="filter-panel">
      <view class="filter-item">
        <text>消息类型</text>
        <view class="filter-options">
          <view 
            v-for="(type, idx) in messageTypes" 
            :key="idx" 
            :class="{ 'option': true, 'selected': selectedTypes.includes(type.id) }"
            @click="toggleType(type.id)"
          >
            {{ type.name }}
          </view>
        </view>
      </view>
      <view class="filter-item">
        <text>时间范围</text>
        <view class="filter-options">
          <view 
            v-for="(time, idx) in timeRanges" 
            :key="idx" 
            :class="{ 'option': true, 'selected': selectedTime === time.id }"
            @click="selectTime(time.id)"
          >
            {{ time.name }}
          </view>
        </view>
      </view>
      <view class="filter-actions">
        <button class="cancel-btn" @click="showFilter = false">取消</button>
        <button class="confirm-btn" @click="applyFilter">确定</button>
      </view>
    </view>

    <!-- 消息列表 -->
    <view class="message-list">
      <view 
        v-for="(message, index) in filteredMessages" 
        :key="index" 
        class="message-item"
        :class="{ 'unread': !message.read }"
        @click="openMessage(message.id)"
      >
        <view class="message-avatar">
          <image :src="message.avatar" mode=""></image>
          <view v-if="!message.read" class="unread-dot"></view>
        </view>
        <view class="message-content">
          <view class="message-header">
            <text class="message-title">{{ message.title }}</text>
            <text class="message-time">{{ message.time }}</text>
          </view>
          <text class="message-desc">{{ message.content }}</text>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="filteredMessages.length === 0 && !loading" class="empty-state">
      <image src="/static/empty_message.png" mode=""></image>
      <text>暂无消息</text>
      <button @click="refreshMessages">刷新</button>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-state">
      <text>加载中...</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      currentTabIndex: 0,
      showFilter: false,
      selectedTypes: [],
      selectedTime: '',
      loading: false,
      messageTabs: [
        { name: '全部', count: 15 },
        { name: '通知', count: 8 },
        { name: '审批', count: 4 },
        { name: '公告', count: 3 }
      ],
      messageTypes: [
        { id: 'notice', name: '通知' },
        { id: 'approve', name: '审批' },
        { id: 'announcement', name: '公告' },
        { id: 'system', name: '系统' }
      ],
      timeRanges: [
        { id: 'today', name: '今天' },
        { id: 'yesterday', name: '昨天' },
        { id: 'week', name: '本周' },
        { id: 'month', name: '本月' },
        { id: 'all', name: '全部' }
      ],
      messages: [
        { 
          id: 1, 
          title: '考勤系统升级通知', 
          content: '考勤系统将于2025年6月25日22:00-次日6:00进行升级维护，期间无法打卡，请提前安排好工作。', 
          time: '09:30', 
          avatar: '/static/ic_notice.png', 
          type: 'notice',
          read: false 
        },
        { 
          id: 2, 
          title: '王小明的请假申请待审批', 
          content: '王小明申请2025年6月20日-2025年6月22日病假，请尽快审批。', 
          time: '10:15', 
          avatar: '/static/ic_approve.png', 
          type: 'approve',
          read: false 
        },
        { 
          id: 3, 
          title: '夏季作息时间调整公告', 
          content: '根据公司安排，自2025年7月1日起，夏季作息时间调整为上午8:30-12:00，下午14:00-18:00。', 
          time: '昨天', 
          avatar: '/static/ic_announcement.png', 
          type: 'announcement',
          read: true 
        },
        { 
          id: 4, 
          title: '项目进度评审会通知', 
          content: '本周四下午2点将召开项目进度评审会，请准备好相关资料，准时参加。', 
          time: '昨天', 
          avatar: '/static/ic_notice.png', 
          type: 'notice',
          read: true 
        },
        { 
          id: 5, 
          title: '李红的报销申请待审批', 
          content: '李红申请报销差旅费共计2,500元，请尽快审批。', 
          time: '昨天', 
          avatar: '/static/ic_approve.png', 
          type: 'approve',
          read: false 
        },
        { 
          id: 6, 
          title: '系统更新完成', 
          content: '移动办公平台已完成更新，新增了日志统计和资产管理功能，请查看帮助文档了解详情。', 
          time: '06-15', 
          avatar: '/static/ic_system.png', 
          type: 'system',
          read: true 
        },
        { 
          id: 7, 
          title: '关于开展员工满意度调查的通知', 
          content: '公司将于2025年6月28日开展员工满意度调查，请各位同事积极参与。', 
          time: '06-15', 
          avatar: '/static/ic_notice.png', 
          type: 'notice',
          read: true 
        },
        { 
          id: 8, 
          title: '张经理的出差申请已通过', 
          content: '您申请的2025年6月25日-2025年6月28日北京出差申请已通过审批。', 
          time: '06-14', 
          avatar: '/static/ic_approve.png', 
          type: 'approve',
          read: true 
        },
        { 
          id: 9, 
          title: '2025年第二季度绩效评估通知', 
          content: '第二季度绩效评估工作即将开始，请各位经理于7月5日前完成下属员工的绩效评估。', 
          time: '06-14', 
          avatar: '/static/ic_notice.png', 
          type: 'notice',
          read: true 
        },
        { 
          id: 10, 
          title: '办公设备采购需求征集', 
          content: '为满足日常办公需求，现征集各部门办公设备采购需求，请于6月22日前提交至行政部。', 
          time: '06-13', 
          avatar: '/static/ic_announcement.png', 
          type: 'announcement',
          read: true 
        }
      ]
    }
  },
  computed: {
    filteredMessages() {
      let filtered = [...this.messages];
      
      // 根据当前选项卡筛选
      if (this.currentTabIndex > 0) {
        const tabType = ['all', 'notice', 'approve', 'announcement'][this.currentTabIndex];
        if (tabType !== 'all') {
          filtered = filtered.filter(msg => msg.type === tabType);
        }
      }
      
      // 根据搜索关键词筛选
      if (this.searchKeyword.trim()) {
        const keyword = this.searchKeyword.trim().toLowerCase();
        filtered = filtered.filter(msg => 
          msg.title.toLowerCase().includes(keyword) || 
          msg.content.toLowerCase().includes(keyword)
        );
      }
      
      // 根据筛选条件筛选
      if (this.selectedTypes.length > 0) {
        filtered = filtered.filter(msg => this.selectedTypes.includes(msg.type));
      }
      
      if (this.selectedTime) {
        const now = new Date();
        const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
        
        filtered = filtered.filter(msg => {
          const msgDate = this.parseMessageDate(msg.time);
          
          switch (this.selectedTime) {
            case 'today':
              return msgDate >= today;
            case 'yesterday':
              const yesterday = new Date(today);
              yesterday.setDate(yesterday.getDate() - 1);
              return msgDate >= yesterday && msgDate < today;
            case 'week':
              const weekAgo = new Date(today);
              weekAgo.setDate(weekAgo.getDate() - 7);
              return msgDate >= weekAgo;
            case 'month':
              const monthAgo = new Date(today);
              monthAgo.setMonth(monthAgo.getMonth() - 1);
              return msgDate >= monthAgo;
            default:
              return true;
          }
        });
      }
      
      return filtered;
    }
  },
  onLoad() {
    this.loadMessages();
  },
  methods: {
    loadMessages() {
      this.loading = true;
      
      // 模拟从服务器获取消息
      setTimeout(() => {
        // 实际开发中应替换为真实的API调用
        this.loading = false;
      }, 800);
    },
    onSearchInput(e) {
      this.searchKeyword = e.detail.value;
    },
    switchTab(index) {
      this.currentTabIndex = index;
      this.showFilter = false;
    },
    toggleType(typeId) {
      const index = this.selectedTypes.indexOf(typeId);
      if (index > -1) {
        this.selectedTypes.splice(index, 1);
      } else {
        this.selectedTypes.push(typeId);
      }
    },
    selectTime(timeId) {
      this.selectedTime = timeId;
    },
    applyFilter() {
      this.showFilter = false;
    },
    openMessage(messageId) {
      // 标记消息为已读
      const message = this.messages.find(msg => msg.id === messageId);
      if (message && !message.read) {
        message.read = true;
        
        // 更新消息选项卡的未读计数
        this.messageTabs.forEach(tab => {
          if (tab.count > 0) {
            tab.count--;
          }
        });
      }
      
      // 跳转到消息详情页
      uni.navigateTo({
        url: `/pages/message/detail?id=${messageId}`
      });
    },
    refreshMessages() {
      this.loading = true;
      
      setTimeout(() => {
        // 模拟刷新操作
        this.loading = false;
        uni.showToast({
          title: '刷新成功',
          icon: 'success'
        });
      }, 800);
    },
    parseMessageDate(timeStr) {
      const now = new Date();
      
      if (timeStr === '今天') {
        return new Date(now.getFullYear(), now.getMonth(), now.getDate());
      }
      
      if (timeStr === '昨天') {
        const yesterday = new Date(now);
        yesterday.setDate(yesterday.getDate() - 1);
        return yesterday;
      }
      
      // 处理 "06-15" 格式
      if (/^\d{2}-\d{2}$/.test(timeStr)) {
        const [month, day] = timeStr.split('-').map(Number);
        return new Date(now.getFullYear(), month - 1, day);
      }
      
      // 处理 "09:30" 格式（今天的时间）
      if (/^\d{2}:\d{2}$/.test(timeStr)) {
        const [hours, minutes] = timeStr.split(':').map(Number);
        const date = new Date(now);
        date.setHours(hours);
        date.setMinutes(minutes);
        return date;
      }
      
      // 默认返回当前时间
      return now;
    }
  }
}
</script>

<style>
.container {
  background-color: #f5f7fa;
  min-height: 100vh;
}

.search-bar {
  display: flex;
  padding: 20rpx 30rpx;
  background-color: white;
}

.search-input {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
  border-radius: 40rpx;
  padding: 0 20rpx;
}

.search-input image {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
}

.search-input input {
  flex: 1;
  height: 60rpx;
  font-size: 26rpx;
}

.search-filter {
  width: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #007AFF;
}

.message-tabs {
  display: flex;
  background-color: white;
  border-bottom: 1rpx solid #eee;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  position: relative;
}

.tab-item text {
  font-size: 28rpx;
}

.active text {
  color: #007AFF;
  font-weight: bold;
}

.badge {
  position: absolute;
  top: 14rpx;
  right: 40rpx;
  background-color: #e53935;
  color: white;
  font-size: 20rpx;
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.filter-panel {
  background-color: white;
  padding: 20rpx 30rpx;
  margin-bottom: 20rpx;
}

.filter-item {
  margin-bottom: 20rpx;
}

.filter-item text {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
}

.option {
  padding: 12rpx 24rpx;
  border-radius: 30rpx;
  background-color: #f5f7fa;
  font-size: 26rpx;
  margin-right: 20rpx;
  margin-bottom: 10rpx;
}

.selected {
  background-color: #e6f7ff;
  color: #007AFF;
}

.filter-actions {
  display: flex;
  justify-content: space-between;
  padding-top: 20rpx;
  border-top: 1rpx solid #eee;
}

.cancel-btn, .confirm-btn {
  width: 320rpx;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.cancel-btn {
  background-color: #f5f7fa;
  color: #333;
}

.confirm-btn {
  background-color: #007AFF;
  color: white;
}

.message-list {
  background-color: white;
}

.message-item {
  display: flex;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.unread {
  background-color: #f5f7fa;
}

.message-avatar {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
  position: relative;
}

.message-avatar image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.unread-dot {
  position: absolute;
  top: -4rpx;
  right: -4rpx;
  width: 20rpx;
  height: 20rpx;
  background-color: #e53935;
  border-radius: 50%;
}

.message-content {
  flex: 1;
}

.message-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.message-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.message-time {
  font-size: 24rpx;
  color: #999;
}

.message-desc {
  font-size: 26rpx;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 160rpx;
}

.empty-state image {
  width: 240rpx;
  height: 240rpx;
  margin-bottom: 40rpx;
}

.empty-state text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 40rpx;
}

.empty-state button {
  width: 240rpx;
  height: 80rpx;
  background-color: #007AFF;
  color: white;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200rpx;
}

.loading-state text {
  font-size: 28rpx;
  color: #999;
}
</style>
    